<script setup lang="ts">
import { ref } from 'vue'
import * as ocrApi from '@/api/ocr'
import { message } from 'ant-design-vue'
import { timeStamp, timeFormat, regYuanToFen, timeFormatYMD, toYuan } from '@/hooks/util'

const myModal = ref()

let taskId = ref<string>('')
const showModal = (id: string) => {
  info.value = {}
  infoFlag.value = false
  dataSource.value = []
  taskId.value = id
  getList(taskId.value)
  myModal.value?.showModal()
}

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})

let info = ref<any>({})
let infoFlag = ref<boolean>(false)
const dataSource = ref<Array<any>>([])
const columns = [
  {
    title: '规则名称',
    key: 'ruleName',
    width: 180,
  },
  {
    title: '状态',
    key: 'status',
    width: 100,
  },
  {
    title: '描述',
    key: 'describe',
    width: 180,
  },
  {
    title: '原因',
    key: 'reason',
    width: 200,
  },
]

let quotationTypeFlag = ref<number>(1) // 1：报价规则，2：预报价规则
let loading = ref<boolean>(false)
const getList = async (taskId: string) => {
  loading.value = true
  try {
    let { state, data, message: msg } = await ocrApi.quotationRuleVerify({ taskId })
    if (state === 200) {
      console.log('data=', data)
      if (data.quotationRule) {
        quotationTypeFlag.value = 1
        info.value = data?.quotationRule || data?.simpleQuotation
        infoFlag.value = true
      }
      if (data.simpleQuotation) {
        quotationTypeFlag.value = 2
        info.value = data?.simpleQuotation
        infoFlag.value = true
      }
      if (data.list) {
        dataSource.value = data.list
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

const getFilterlist = (list: Array<any> = [], type: number) => {
  if (list.length > 0) {
    // console.log('list', list.filter(item => item.containStatus == type))

    return list.filter(item => item.containStatus == type)
  } else {
    return []
  }
}
</script>

<template>
  <MyModal ref="myModal" title="规则校验说明" :top="35" :width="1200">
    <template #content>
      <a-alert
        description="小提示：只要鼠标在表格上，按住左Shift键并滚动鼠标滚轮就可以横向滚动表格"
        type="info"
        banner
        style="margin-bottom: 10px; padding: 10px"
      />

      <a-spin :spinning="loading">
        <div
          style="
            width: 1160px;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            margin-bottom: 10px;
          "
          v-if="infoFlag"
        >
          <div
            v-if="quotationTypeFlag == 1"
            style="width: 400px; margin-right: 10px; display: inline-block"
          >
            <a-descriptions bordered size="small" :column="1">
              <a-descriptions-item label="规则名称">
                {{ info?.ruleName }}
              </a-descriptions-item>
              <a-descriptions-item label="影院名匹配">
                <div v-if="info?.cinemaNameType == 1">精准匹配</div>
                <div v-if="info?.cinemaNameType == 2">模糊匹配</div>
              </a-descriptions-item>
              <a-descriptions-item label="开关状态">
                <div v-if="info?.ruleStatus == 0">
                  <span
                    style="
                      width: 6px;
                      height: 6px;
                      background-color: red;
                      display: inline-block;
                      border-radius: 50%;
                    "
                  ></span>
                  已停用
                </div>
                <div v-if="info?.ruleStatus == 1">
                  <span
                    style="
                      width: 6px;
                      height: 6px;
                      background-color: #01ff01;
                      display: inline-block;
                      border-radius: 50%;
                    "
                  ></span>
                  已启用
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="更新时间">
                {{ timeFormat(info?.updateTime) }}
              </a-descriptions-item>
            </a-descriptions>
          </div>

          <div
            v-if="quotationTypeFlag == 1"
            style="width: 400px; margin-right: 10px; display: inline-block"
          >
            <a-descriptions bordered size="small" :column="1">
              <a-descriptions-item label="猫淘价区间">
                <div>
                  {{ toYuan(info.marketPriceBegin) }} ~
                  {{ toYuan(info.marketPriceEnd) }}
                </div>
              </a-descriptions-item>

              <a-descriptions-item label="报价方式">
                <span v-if="info.quotationType == 1">比例加减</span>
                <span v-if="info.quotationType == 2">猫淘价减法</span>
                <span v-if="info.quotationType == 3">固定金额</span>
                <span v-if="info.quotationType == 4">溢价模式</span>
              </a-descriptions-item>

              <a-descriptions-item label="报价金额">
                <span v-if="info.quotationType == 1">
                  【猫淘价 * {{ info.quotationPercent }}%】
                  <span style="color: #18d818" v-if="info.quotationDiscount >= 0">
                    +{{ toYuan(info.quotationDiscount) }}
                  </span>
                  <span style="color: red" v-else>
                    {{ toYuan(info.quotationDiscount) }}
                  </span>
                </span>
                <span v-if="info.quotationType == 2">
                  【猫淘价】
                  <span style="color: red">{{ toYuan(info.quotationDiscount) }}</span>
                </span>
                <span v-if="info.quotationType == 3">
                  {{ toYuan(info.quotationDiscount) }}
                </span>
                <span v-if="info.quotationType == 4">
                  {{ toYuan(info.quotationDiscount) }} + 【溢价部分】
                </span>
              </a-descriptions-item>

              <a-descriptions-item label="单张限价">
                <div>【报价】 + {{ Math.abs(info.limitPrice) / 100 }}</div>
              </a-descriptions-item>
            </a-descriptions>
          </div>

          <div
            v-if="quotationTypeFlag == 1"
            style="width: 400px; margin-right: 10px; display: inline-block"
          >
            <a-descriptions bordered size="small" :column="1">
              <a-descriptions-item label="包含省份">
                <a-tooltip placement="top" v-if="getFilterlist(info.provinceList, 1).length > 0">
                  <template #title>
                    <template v-for="item in info.provinceList">
                      <a-tag v-if="item.containStatus == 1" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.provinceList">
                      <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>

              <a-descriptions-item label="排除省份">
                <a-tooltip placement="top" v-if="getFilterlist(info.provinceList, 0).length > 0">
                  <template #title>
                    <template v-for="item in info.provinceList">
                      <a-tag v-if="item.containStatus == 0" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.provinceList">
                      <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>

              <a-descriptions-item label="包含城市">
                <a-tooltip placement="top" v-if="getFilterlist(info.cityList, 1).length > 0">
                  <template #title>
                    <template v-for="item in info.cityList">
                      <a-tag v-if="item.containStatus == 1" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.cityList">
                      <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>

              <a-descriptions-item label="排除城市">
                <a-tooltip placement="top" v-if="getFilterlist(info.cityList, 0).length > 0">
                  <template #title>
                    <template v-for="item in info.cityList">
                      <a-tag v-if="item.containStatus == 0" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.cityList">
                      <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>
            </a-descriptions>
          </div>

          <div
            v-if="quotationTypeFlag == 1"
            style="width: 400px; margin-right: 10px; display: inline-block"
          >
            <a-descriptions bordered size="small" :column="1">
              <a-descriptions-item label="包含影院">
                <a-tooltip placement="top" v-if="getFilterlist(info.cinemaList, 1).length > 0">
                  <template #title>
                    <template v-for="item in info.cinemaList">
                      <a-tag v-if="item.containStatus == 1" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.cinemaList">
                      <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>

              <a-descriptions-item label="排除影院">
                <a-tooltip placement="top" v-if="getFilterlist(info.cinemaList, 0).length > 0">
                  <template #title>
                    <template v-for="item in info.cinemaList">
                      <a-tag v-if="item.containStatus == 0" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.cinemaList">
                      <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>

              <a-descriptions-item label="包含影厅">
                <a-tooltip placement="top" v-if="getFilterlist(info.filmHallList, 1).length > 0">
                  <template #title>
                    <template v-for="item in info.filmHallList">
                      <a-tag v-if="item.containStatus == 1" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.filmHallList">
                      <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>

              <a-descriptions-item label="排除影厅">
                <a-tooltip placement="top" v-if="getFilterlist(info.filmHallList, 0).length > 0">
                  <template #title>
                    <template v-for="item in info.filmHallList">
                      <a-tag v-if="item.containStatus == 0" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.filmHallList">
                      <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>
            </a-descriptions>
          </div>

          <div
            v-if="quotationTypeFlag == 1"
            style="width: 400px; margin-right: 10px; display: inline-block"
          >
            <a-descriptions bordered size="small" :column="1">
              <a-descriptions-item label="包含影片">
                <a-tooltip placement="top" v-if="getFilterlist(info.filmList, 1).length > 0">
                  <template #title>
                    <template v-for="item in info.filmList">
                      <a-tag v-if="item.containStatus == 1" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.filmList">
                      <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>

              <a-descriptions-item label="排除影片">
                <a-tooltip placement="top" v-if="getFilterlist(info.filmList, 0).length > 0">
                  <template #title>
                    <template v-for="item in info.filmList">
                      <a-tag v-if="item.containStatus == 0" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.filmList">
                      <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>

              <a-descriptions-item label="票数">
                <div v-if="info.seatCount == '0'">不限制</div>
                <div v-else>{{ info.seatCount }}张</div>
              </a-descriptions-item>

              <a-descriptions-item label="包含院线">
                <a-tooltip placement="top" v-if="getFilterlist(info.lineList, 1).length > 0">
                  <template #title>
                    <template v-for="item in info.lineList">
                      <a-tag v-if="item.containStatus == 1" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.lineList">
                      <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>
            </a-descriptions>
          </div>

          <div
            v-if="quotationTypeFlag == 1"
            style="width: 400px; margin-right: 10px; display: inline-block"
          >
            <a-descriptions bordered size="small" :column="1">
              <a-descriptions-item label="放映日期">
                <div v-if="info.beginLimitTime != '0'">
                  {{ timeFormatYMD(info.beginLimitTime) }} ~
                  {{ timeFormatYMD(info.endLimitTime) }}
                </div>
                <div v-else>不限制</div>
              </a-descriptions-item>
              <a-descriptions-item label="放映时间">
                <div>{{ info.beginTime }} - {{ info.endTime }}</div>
              </a-descriptions-item>
              <a-descriptions-item label="星期">
                <span v-if="info.week == '0'">全部</span>
                <span v-else>
                  <span v-for="(item, index) in info.week?.split(',')">周{{ item }},</span>
                </span>
              </a-descriptions-item>

              <a-descriptions-item label="排除院线">
                <a-tooltip placement="top" v-if="getFilterlist(info.lineList, 0).length > 0">
                  <template #title>
                    <template v-for="item in info.lineList">
                      <a-tag v-if="item.containStatus == 0" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.lineList">
                      <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>
            </a-descriptions>
          </div>

          <div
            v-if="quotationTypeFlag == 1"
            style="width: 400px; margin-right: 10px; display: inline-block"
          >
            <a-descriptions bordered size="small" :column="1">
              <!-- 2/3d - 新 -->
              <a-descriptions-item label="包含影片类型">
                <a-tooltip placement="top" v-if="getFilterlist(info.planTypeList, 1).length > 0">
                  <template #title>
                    <template v-for="item in info.planTypeList">
                      <a-tag v-if="item.containStatus == 1" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.planTypeList">
                      <span v-if="item.containStatus == 1" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>

              <a-descriptions-item label="排除影片类型">
                <a-tooltip placement="top" v-if="getFilterlist(info.planTypeList, 0).length > 0">
                  <template #title>
                    <template v-for="item in info.planTypeList">
                      <a-tag v-if="item.containStatus == 0" color="blue">
                        {{ item.name }}
                      </a-tag>
                    </template>
                  </template>
                  <div class="hiddenText">
                    <template v-for="item in info.planTypeList">
                      <span v-if="item.containStatus == 0" color="blue">{{ item.name }},</span>
                    </template>
                  </div>
                </a-tooltip>
                <div v-else>不限制</div>
              </a-descriptions-item>
              <!-- 2/3d - 新 -->

              <a-descriptions-item label="首选/备选渠道">
                <a-tag color="blue" v-if="info.matchChannel == 3">麻花</a-tag>
                <a-tag color="blue" v-if="info.matchChannel == 11">守兔一口价</a-tag>
                <a-tag color="blue" v-if="info.matchChannel == 7">守兔</a-tag>
                <a-tag color="blue" v-if="info.matchChannel == 5">芒果</a-tag>
                <a-tag color="blue" v-if="info.matchChannel == 6">哈哈</a-tag>
                <a-tag color="blue" v-if="info.matchChannel == 9">哈哈快票</a-tag>
                <a-tag color="blue" v-if="info.matchChannel == 8">星驰</a-tag>
                <a-tag color="blue" v-if="info.slaveMatchChannel == 3">麻花</a-tag>
                <a-tag color="blue" v-if="info.slaveMatchChannel == 6">哈哈</a-tag>
                <a-tag color="blue" v-if="info.slaveMatchChannel == 11">守兔一口价</a-tag>
                <a-tag color="blue" v-if="info.slaveMatchChannel == 7">守兔</a-tag>
                <a-tag color="blue" v-if="info.slaveMatchChannel == 5">芒果</a-tag>
                <a-tag color="blue" v-if="info.slaveMatchChannel == 9">哈哈快票</a-tag>
                <a-tag color="blue" v-if="info.slaveMatchChannel == 8">星驰</a-tag>
                <a-tag v-if="info.slaveMatchChannel == 101" color="blue">预估限价</a-tag>
                <a-tag v-if="info.slaveMatchChannel == 102" color="blue">一口价</a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="是否启用限价">
                <a-tag color="blue" v-if="info.enableLimitPrice == 1">启用</a-tag>
                <a-tag color="red" v-if="info.enableLimitPrice == 0">不启用</a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </div>

          <div
            v-if="quotationTypeFlag == 2"
            style="width: 400px; margin-right: 10px; display: inline-block"
          >
            <a-descriptions bordered size="small" :column="1">
              <a-descriptions-item label="名称" :labelStyle="{ width: '80px' }">
                <a-tooltip placement="top">
                  <template #title>
                    <span>{{ info.name }}</span>
                  </template>
                  <span class="hiddenText_2">{{ info.name }}</span>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="院线" :labelStyle="{ width: '80px' }">
                <a-tooltip placement="top">
                  <template #title>
                    <a-tag color="blue" v-for="item in info.lineList" :key="item">
                      {{ item.lineName }}
                    </a-tag>
                  </template>
                  <div class="hiddenText_2" style="height: 16px; line-height: 16px">
                    <a-tag
                      color="blue"
                      v-for="item in info.lineList"
                      :key="item"
                      size="small"
                      style="height: 16px; line-height: 16px"
                    >
                      {{ item.lineName }}
                    </a-tag>
                  </div>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="排除影院" :labelStyle="{ width: '80px' }">
                <a-tooltip placement="top">
                  <template #title>
                    <a-tag color="blue" v-for="item in info.cinemaList" :key="item">
                      {{ item.name }}
                    </a-tag>
                  </template>
                  <div class="hiddenText_2" style="height: 16px; line-height: 16px">
                    <a-tag
                      color="blue"
                      v-for="item in info.cinemaList"
                      :key="item"
                      size="small"
                      style="height: 16px; line-height: 16px"
                    >
                      {{ item.name }}
                    </a-tag>
                  </div>
                </a-tooltip>
              </a-descriptions-item>
            </a-descriptions>
          </div>

          <div
            v-if="quotationTypeFlag == 2"
            style="width: 400px; margin-right: 10px; display: inline-block"
          >
            <a-descriptions bordered size="small" :column="1">
              <a-descriptions-item label="报价出票模式" :labelStyle="{ width: '100px' }">
                <!-- <span v-if="info.ticketChannel == 3">麻花</span>
                <span v-if="info.ticketChannel == 11">守兔一口价</span>
                <span v-if="info.ticketChannel == 7">守兔</span>
                <span v-if="info.ticketChannel == 5">芒果</span>
                <span v-if="info.ticketChannel == 9">哈哈快票</span>
                <span v-if="info.ticketChannel == 8">星驰</span>
                <span v-if="info.ticketChannel == 10">影划算</span>
                <span v-if="info.ticketChannel == 99">动态渠道</span> -->
                <a-tag color="blue" v-if="info.quotationMode == 2">一口价</a-tag>
                <a-tag color="blue" v-if="info.quotationMode == 1">预估限价</a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="报价方式" :labelStyle="{ width: '100px' }">
                <span v-if="info.quotationType == 1">加法</span>
                <span v-if="info.quotationType == 2">减法</span>
                <span v-if="info.quotationType == 3">比例加法</span>
                <span v-if="info.quotationType == 4">比例减法</span>
              </a-descriptions-item>
            </a-descriptions>
          </div>

          <div
            v-if="quotationTypeFlag == 2"
            style="width: 400px; margin-right: 10px; display: inline-block"
          >
            <a-descriptions bordered size="small" :column="1">
              <a-descriptions-item label="报价金额" :labelStyle="{ width: '100px' }">
                <span v-if="info.quotationType == 1">
                  预报价金额
                  <span style="color: red">+</span>
                  {{ Math.abs(toYuan(info.discount) as any) }} ￥
                </span>
                <span v-if="info.quotationType == 2">
                  预报价金额
                  <span style="color: red">-</span>
                  {{ Math.abs(toYuan(info.discount) as any) }} ￥
                </span>
                <span v-if="info.quotationType == 3">
                  预报价金额
                  <span style="color: red">*</span>
                  (1 + {{ info.percent }}%)
                </span>
                <span v-if="info.quotationType == 4">
                  预报价金额
                  <span style="color: red">*</span>
                  (1 {{ info.percent }}%)
                </span>
              </a-descriptions-item>
              <a-descriptions-item label="启用状态" :labelStyle="{ width: '100px' }">
                <a-tag color="red" v-if="info.status == 0">禁用</a-tag>
                <a-tag color="blue" v-if="info.status == 1">启用</a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </div>

        <a-table
          style="overflow-x: scroll"
          :columns="columns"
          :data-source="dataSource"
          :pagination="false"
          rowKey="id"
          :scroll="{ y: 400 }"
        >
          <template #emptyText>
            <a-empty description="暂无数据" />
          </template>

          <template #headerCell="{ column }"></template>

          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'ruleName'">
              <a-tooltip placement="topLeft">
                <template #title>
                  <span>{{ record.ruleName }}</span>
                </template>
                <div class="hiddenText">
                  <a-tag color="blue">{{ record.ruleName || '无' }}</a-tag>
                </div>
              </a-tooltip>
            </template>

            <template v-else-if="column.key === 'describe'">
              <div>
                <a-tooltip placement="topLeft">
                  <template #title>
                    <span>{{ record.describe }}</span>
                  </template>
                  <div class="hiddenText" style="width: 220px">
                    {{ record.describe }}
                  </div>
                </a-tooltip>
              </div>
            </template>

            <template v-else-if="column.key === 'status'">
              <div style="width: 100px">
                <a-tag color="red" v-if="record.status == 0">抛弃</a-tag>
                <a-tag color="blue" v-if="record.status == 1">命中</a-tag>
              </div>
            </template>

            <template v-if="column.key === 'reason'">
              <div>
                <a-tooltip placement="topLeft">
                  <template #title>
                    <span>{{ record.reason }}</span>
                  </template>
                  <div class="hiddenText" style="width: 220px">
                    {{ record.reason }}
                  </div>
                </a-tooltip>
              </div>
            </template>
          </template>
        </a-table>

        <div style="text-align: right">
          <a-button type="primary" @click="() => myModal.cancelModal()">关闭</a-button>
        </div>
      </a-spin>
    </template>
  </MyModal>
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.hiddenText_2 {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
}
</style>
